import { Component, createRef } from "react";

import iconMarker from "@/assets/marker.png";
import { Button, Space } from "antd";

export default class MapBasic extends Component {
  boxRef = createRef<HTMLDivElement>();
  mapIns: any = null;
  markerIns: any = null;

  render() {
    return (
      <div>
        <h2>地图打点</h2>

        <Space>
          <Button type="primary" onClick={this.test1}>
            打点
          </Button>
          <Button type="primary" onClick={this.test2}>
            打点
          </Button>

          <Button type="primary" onClick={this.test3}>
            点的 MoveAlong
          </Button>

          <Button type="primary" onClick={this.test4}>
            自适应，让地图上显示出所有的点
          </Button>
        </Space>
        <hr />

        <div
          ref={this.boxRef}
          style={{ height: 400, width: "100%", border: "1px solid #000" }}
        ></div>
      </div>
    );
  }

  test1 = () => {
    new TMap.MultiMarker({
      map: this.mapIns,
      //点标记数据数组
      geometries: [
        {
          id: 3,
          position: new TMap.LatLng(22.624694, 113.839284),
        },
      ],
    });
  };

  test2 = () => {
    const markerIns = new TMap.MultiMarker({
      //点标记数据数组
      geometries: [
        {
          id: 4,
          position: new TMap.LatLng(22.624694, 113.839284),
        },
      ],
    });

    // 调用 markerIns.setMap() 应用到某个地图实例上
    markerIns.setMap(this.mapIns);

    setTimeout(() => {
      markerIns.setGeometries([
        {
          position: new TMap.LatLng(22.625214, 113.84116),
        },
      ]);
    }, 1000);
  };

  test3 = () => {
    this.markerIns.moveAlong({
      // 某个MarkerId
      kfc: {
        // 移动轨迹
        path: [
          new TMap.LatLng(22.627248, 113.836869),
          new TMap.LatLng(22.624283, 113.837748),
          new TMap.LatLng(22.626707, 113.839437),
        ],
        // 速度
        speed: 250,
      },
    });
  };

  test4 = () => {
    const bounds = new TMap.LatLngBounds();
    console.log(bounds.isEmpty()); // true
    bounds.extend(new TMap.LatLng(22.627248, 113.836869));
    bounds.extend(new TMap.LatLng(22.626707, 113.839437));
    console.log(bounds.isEmpty()); // false

    this.mapIns.fitBounds(bounds, {
      padding: 100,
    });
  };

  componentDidMount(): void {
    // 初始化地图实例
    this.mapIns = new TMap.Map(this.boxRef.current, {
      center: [22.626199, 113.838053], // 地图中心点坐标
      zoom: 18,
    });

    // 立刻点标记
    this.markerIns = new TMap.MultiMarker({
      map: this.mapIns,
      // 定义样式
      styles: {
        //创建一个styleId为"myStyle"的样式（styles的子属性名即为styleId）
        myStyle: new TMap.MarkerStyle({
          width: 32, // 点标记样式宽度（像素）
          height: 32, // 点标记样式高度（像素）
          src: iconMarker, //图片路径
          //焦点在图片中的像素位置，一般大头针类似形式的图片以针尖位置做为焦点，圆形点以圆心位置为焦点
          anchor: { x: 16, y: 0 },
        }),
      },
      //点标记数据数组
      geometries: [
        {
          id: "kfc",
          position: new TMap.LatLng(22.627248, 113.836869),
          properties: {
            title: "KFC",
          },
        },
        {
          id: 2,
          styleId: "myStyle",
          position: new TMap.LatLng(22.626707, 113.839437),
          properties: {
            title: "批发",
          },
        },
      ],
    });
  }
}
